<template>
    <div
        class="xzcs-pc-viponly-detail"
        :class="{ 'gaussian-blur': showNoLogin }"
    >
        <div class="tabs-top">
            <div v-for="(item, index) in tabsList" :key="index">
                <nuxt-link :to="`/ssfgk/${item.pathName}/0/1`">
                    <div
                        :class="{ 'tabs-active': tabsIndex == index }"
                        class="tab"
                    >
                        {{ item.name }}
                    </div>
                </nuxt-link>
            </div>
        </div>

        <div class="regulation">
            <div class="breadcrumb-seek">
                <breadcrumb>
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item>
                            <nuxt-link to="/"> 首页 </nuxt-link>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item>
                            <nuxt-link to="/viponly">
                                会员专享政策解读
                            </nuxt-link>
                        </el-breadcrumb-item>
                        <el-breadcrumb-item v-if="infoData && infoData.title">
                            {{ infoData.title }}
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </breadcrumb>
                <no-ssr placeholder="">
                    <div class="seek">
                        <el-input
                            v-model="seekInput"
                            placeholder="请输入内容"
                        ></el-input>
                        <div class="button" @click="keywordRed">
                            <i class="el-icon-search"></i>查找
                        </div>
                    </div>
                </no-ssr>
            </div>

            <div class="regulation-con">
                <div class="left_flip">
                    <div class="factor">
                        <div class="factor_title">
                            <i class="el-icon-document factor_icon"></i>
                            内容要素
                        </div>
                        <div class="line"></div>
                        <div v-if="infoData" class="factor_content">
                            <div class="factor_item">
                                <div class="item_label">解读时间：</div>
                                <div class="item_txt">
                                    {{ addtime }}
                                </div>
                            </div>
                            <div class="factor_item">
                                <div class="item_label">解读单位：</div>
                                <div class="item_txt">小竹财税</div>
                            </div>
                        </div>
                    </div>
                    <no-ssr placeholder="">
                        <div class="factor factor-sticky">
                            <div class="factor_title">
                                <img
                                    src="~/assets/images/regulations/gzh.png"
                                    alt=""
                                />
                                关注公众号
                            </div>
                            <div class="line"></div>
                            <div class="wx-gzh-con">
                                <img
                                    src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/xzwd-gzh-code.png"
                                    alt=""
                                />
                                <div class="wx-gzh-con-text">
                                    <div class="wx-gzh-con-title">
                                        关注公众号
                                    </div>
                                    实时接收最新法规库及考试资讯
                                </div>
                            </div>
                        </div>
                    </no-ssr>
                </div>
                <div class="right info">
                    <div class="info-content">
                        <div class="caozuo-list">
                            <!-- <div class="caozuo-item" @click="setCollection">
                                <img
                                    :src="
                                        infoData && infoData.is_collect
                                            ? collectionS
                                            : collection
                                    "
                                    alt=""
                                />
                                收藏
                            </div> -->
                            <!-- <div class="caozuo-item" @click="changeFontSize()">
                                <img
                                    src="~/assets/images/regulations/T.png"
                                    alt=""
                                />
                                字体
                            </div> -->
                            <div class="font-size-type">
                                <div
                                    :class="{
                                        'size-active': fontSizeIndex == 0,
                                    }"
                                    @click="changeFontSize(0)"
                                >
                                    小
                                </div>
                                <div
                                    :class="{
                                        'size-active': fontSizeIndex == 1,
                                    }"
                                    @click="changeFontSize(1)"
                                >
                                    中
                                </div>
                                <div
                                    :class="{
                                        'size-active': fontSizeIndex == 2,
                                    }"
                                    @click="changeFontSize(2)"
                                >
                                    大
                                </div>
                            </div>
                        </div>
                        <el-skeleton v-show="loading" :rows="20" animated />
                        <h1 class="info-title">
                            {{ infoData && infoData.title }}
                        </h1>

                        <div
                            v-if="
                                infoData &&
                                !infoData.notice &&
                                infoData.abstract
                            "
                            class="info-abstract"
                            v-html="'小竹前瞻：' + infoData.abstract"
                        ></div>

                        <div v-if="infoData && infoData.notice" class="xzts">
                            <img
                                class="xzts-img"
                                src="~/assets/images/regulations/xzts.png"
                                :alt="infoData.notice"
                            />
                            <div class="xzts-text">
                                <div class="xzts-title">小竹提示</div>
                                {{ infoData.notice }}
                            </div>
                        </div>

                        <div
                            class="content"
                            :class="[fontSizeList[fontSizeIndex]]"
                            v-html="info_content"
                            @click="imageEnlargement"
                        ></div>
                    </div>
                    <!-- <div class="up-down">
                        <div v-if="infoData" class="prev-next">
                            <div v-if="infoData.prevdata">
                                <div class="name">
                                    上一篇：
                                    <nuxt-link
                                        :to="`/ssfgk/${infoData.prevdata.id}.html`"
                                        target="_blank"
                                        rel="prev"
                                    >
                                        {{ infoData.prevdata.title }}
                                    </nuxt-link>
                                </div>
                                <div class="time">
                                    {{ infoData.prevdata.push_date }}
                                </div>
                            </div>
                            <div v-if="infoData.nextdata">
                                <div class="name">
                                    下一篇：
                                    <nuxt-link
                                        :to="`/ssfgk/${infoData.nextdata.id}.html`"
                                        target="_blank"
                                        rel="next"
                                    >
                                        {{ infoData.nextdata.title }}
                                    </nuxt-link>
                                </div>
                                <div class="time">
                                    {{ infoData.nextdata.push_date }}
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>

        <el-image
            v-show="false"
            class="my-img"
            ref="myImg"
            src=""
            :preview-src-list="previewList"
        >
        </el-image>
    </div>
</template>

<script>
import { mapMutations, mapState } from "vuex";

import {
    getPolicyInfo,
    setPolicyCollect,
    policy_interpretation_detail,
} from "@/assets/api/regulationsApi.js";
import { getanalysedata2 } from "@/assets/api/indexApi";
import { recommend_policy } from "@/assets/api/quizData";

import {
    goTop,
    goTopSmooth,
    wrapText,
    getArr_objKey,
    replaceurl,
    internally,
    getText,
} from "@/assets/utils/utils.js";

import breadcrumb from "@/components/index/breadcrumb.vue";

import collectionS from "@/assets/images/regulations/collection_s.png";
import collection from "@/assets/images/regulations/collection.png";

// 推荐阅读组件
import recommendedReading from "@/components/recommendedReading/index-router.vue";

import moment from "moment";

export default {
    components: {
        breadcrumb,
        recommendedReading,
    },
    async asyncData({ params }) {
        let data = {
            info_content: "",
            infoData: null,
            id: 0,
            mateInfo: {
                title: "税收法规库",
                keywords: "",
                description: "",
            },
            jsonld: {
                "@context": "https://ziyuan.baidu.com/contexts/cambrian.jsonld",
                "@id": "https://www.xzcs2022.com/ssfgk/",
                images: [""],
                title: "",
                description: "",
                pubDate: "",
                upDate: "",
            },
            typePath: "index",
        };

        data.id = parseInt(params.id.replace(".html", ""));
        data.jsonld["@id"] += params.id;

        return data;
    },
    layout: "home",
    head() {
        return {
            script: [
                {
                    type: "application/ld+json",
                    innerHTML: JSON.stringify(this.jsonld),
                },
            ],
            __dangerouslyDisableSanitizers: ["script"],
            title: this.mateInfo.title + "-【小竹财税平台】",
            meta: [
                {
                    hid: "description",
                    name: "description",
                    content: this.mateInfo.description,
                },
                {
                    hid: "keywords",
                    name: "keywords",
                    content: this.mateInfo.keywords,
                },
            ],
        };
    },
    data() {
        return {
            tabsIndex: 0,
            tabsTwoIndex: 0,

            // id: 0,

            // infoData: null,

            collectionS: collectionS,
            collection: collection,

            fontSizeList: ["font-small", "font-medium", "font-large"],
            fontSizeIndex: 1,

            previewList: [""],

            // mateInfo: {
            //     title: "税收法规库",
            //     keywords: "",
            //     description: "",
            // },

            seekInput: "",
            // info_content: "",
            // hotReadList: [],
            questionsInfo: {},

            loading: false,

            showNoLogin: false,

            addtime: "",
        };
    },
    created() {
        // if (this.infoData) {
        //     this.info_content = this.infoData.info_content;
        //     this.mateInfo.title = this.infoData.title;
        //     this.mateInfo.description = this.infoData.abstract;
        //     this.loading = false;
        // } else {
        //     // this.getData();
        // }
    },
    mounted() {
        this.setmenuIndex("3");

        if (this.$route.params.type) {
            this.tabsIndex = getArr_objKey(
                this.tabsList,
                this.$route.params.type.replace(".html", ""),
                "pathName"
            );
        }
        this.$nextTick(() => {
            goTop(0);
            this.getData();
        });
    },
    computed: {
        ...mapState("regulations", {
            tabsList: (state) => state.TTabsList,
            hotReadList: (state) => state.hotReadList,
        }),
        ...mapState("common", {
            isFooterShow: (state) => state.isFooterShow,
        }),
    },
    methods: {
        ...mapMutations("common", ["setmenuIndex", "getUserInfo2"]),

        async getData() {
            try {
                this.loading = true;
                const res = await policy_interpretation_detail({
                    id: this.id,
                });
                this.loading = false;

                if (res.code == 1) {
                    this.infoData = res.data;
                    console.log(this.infoData);

                    this.info_content = res.data.content;
                    this.info_content = internally(this.info_content);

                    this.info_content = replaceurl(
                        this.info_content,
                        res.data.title
                    );

                    this.mateInfo.title = this.infoData.title;

                    let abstract = getText(this.infoData.content, 90);
                    this.mateInfo.description = abstract;

                    this.jsonld.title = this.infoData.title;
                    this.jsonld.description = abstract;
                    this.addtime =
                        this.jsonld.pubDate =
                        this.jsonld.upDate =
                            moment(this.infoData.addtime * 1000).format(
                                "YYYY-MM-DD"
                            );

                    getanalysedata2({
                        m_id: 16,
                        type: 1,
                        describe: this.infoData.title,
                        code: "PO2",
                    });
                } else if (res.code == -100) {
                    this.$alert(
                        `<div style='text-align: left'>今日免费次数已用完，请您充值成为会员，以享受更多精彩的功能和服务。</div>`,
                        "温馨提示",
                        {
                            customClass: "vip-message-box",
                            dangerouslyUseHTMLString: true,
                            showClose: false,
                            closeOnClickModal: false,
                            confirmButtonText: "加入会员",
                            callback: (action) => {
                                this.$router.push({
                                    path: "/user/myvip",
                                });
                            },
                        }
                    );
                    this.showNoLogin = true;
                }
            } catch (error) {
                console.log(error);
                this.loading = false;
            }
        },

        // 获取热门阅读
        async getHotRead() {
            const res2 = await recommend_policy({
                limit: 10,
            });
            if (res2.code == 1) {
                this.hotReadList = res2.data;
                this.getreadingList();
            }
        },

        getMetaInfo() {
            if (this.$route.params.type == "index") {
                this.mateInfo.title = "小竹税收法规库-财税法规库";
                this.mateInfo.keywords = "小竹税收法规库,小竹财税法规库";
                this.mateInfo.description =
                    "小竹税收法规库汇集了各种税收政策和地方财税法规，包括但不限于增值税、企业所得税、个人所得税、印花税和土地增值税及相关的税收解读说明和操作指南。";
            } else if (this.$route.params.type == "zyfg") {
                this.mateInfo.title = "中央税收法规";
                this.mateInfo.keywords = "中央税收法规";
                this.mateInfo.description =
                    "小竹财税中央税收法规版块，汇集众多中央税收法规政策。实时更新中央颁布的税收条例及税收相关规定，帮助企业及从业人员深入了解税收法规，并积极响应最新税收政策的宣传与发布。";
            } else if (this.$route.params.type == "yhzz") {
                this.mateInfo.title = "税收优惠政策";
                this.mateInfo.keywords = "税收优惠政策";
                this.mateInfo.description =
                    "小竹财税税收优惠政策版块，汇集众多税收优惠政策。实时更新税收优惠政策条例及税收相关优惠规定出台，并积极响应税收优惠政策的发布与实施。";
            } else if (this.$route.params.type == "dfff") {
                this.mateInfo.title = "地方税收法规";
                this.mateInfo.keywords = "地方税收法规";
                this.mateInfo.description =
                    "小竹财税地方税收法规版块，汇集众多税地方税收法规政策，实时更新地方税收法规条例及相关地方税收法规优惠政策出台，并积极推动地方税收法规宣传与发布。";
            } else if (this.$route.params.type == "hgzhwj") {
                this.mateInfo.title = "海关综合文件税收法规";
                this.mateInfo.keywords = "海关综合文件税收法规";
                this.mateInfo.description =
                    "小竹财税海关综合文件税收法规版块，汇集众多海关综合文件税收法规，实时更海关综合文件税收法规条例及相关海关综合文件税收法规政策出台，并积极推动海关综合文件税收法规宣传与发布。";
            } else if (this.$route.params.type == "gjkjss") {
                this.mateInfo.title = "国际跨境税收法规";
                this.mateInfo.keywords = "国际跨境税收法规";
                this.mateInfo.description =
                    "小竹财税国际跨境税收法规版块，汇集众多国际跨境税收法规。实时更新国际跨境税收条例及相关的国际跨境税收政策出台，并积极推动国际跨境税收政策宣传与发布。";
            } else if (this.$route.params.type == "whwj") {
                this.mateInfo.title = "外汇文件税收法规";
                this.mateInfo.keywords = "外汇文件税收法规";
                this.mateInfo.description =
                    "小竹财税外汇文件税收法规板块，汇集众多外汇文件税收法规。实时更新外汇文件税收法规条例及相关的外汇文件税收法规政策出台，并积极推动外汇文件税收法规宣传与发布。";
            } else if (this.$route.params.type == "12366rdwd") {
                this.mateInfo.title = "12366税收热点问答";
                this.mateInfo.keywords = "12366税收热点问答";
                this.mateInfo.description =
                    "小竹财税12366税收热点问答版块，汇集众多12366税收热点问答。实时更新12366税收热点问答及相关的12366税收热点问答政策出台，并积极推动外汇文件税收法规宣传与发布。";
            } else if (this.$route.params.type == "zfbz") {
                this.mateInfo.title = "政府补助税收法规";
                this.mateInfo.keywords = "政府补助税收法规";
                this.mateInfo.description =
                    "小竹财税政府补助税收法规版块，汇集众多政府补助税收法规。实时更新政府补助税收法规及相关政府补助税收法规政策出台，并积极推动政府补助税收法规宣传与发布。";
            } else if (this.$route.params.type == "fgft") {
                this.mateInfo.title = "税收法规法条";
                this.mateInfo.keywords = "税收法规法条";
                this.mateInfo.description =
                    "小竹财税税收法规法条版块，汇集众多多税收法规法条。实时更新税收法规法条及相关税收法规法条政策出台，并积极推动税收法规法条宣传与发布。";
            }
        },

        // 点击富文本
        imageEnlargement(e) {
            if (e.target.nodeName == "IMG") {
                //判断点击富文本内容为img图片
                this.previewList = [e.target.currentSrc];
                this.$refs.myImg.showViewer = true;
            }
        },

        // 点击收藏
        async setCollection() {
            const res = await setPolicyCollect({
                id: this.id,
            });
            if (res.code == 1) {
                this.infoData.is_collect == 0
                    ? (this.infoData.is_collect = 1)
                    : (this.infoData.is_collect = 0);
                if (this.infoData.is_collect == 1) {
                    this.$message({
                        message: "收藏成功",
                        type: "success",
                    });
                } else {
                    this.$message({
                        message: "取消收藏",
                        type: "warning",
                    });
                }
            }
        },

        // // 获取中央法规税种
        // async getPolicyPcCate() {
        //     this.tabsIndex = this.$route.query.index
        //         ? parseInt(this.$route.query.index)
        //         : 0;
        //     this.tabsTwoIndex = this.$route.query.index
        //         ? parseInt(this.$route.query.indexTwo)
        //         : 0;

        //     let taxCategory = localStorage.getItem("taxCategory");
        //     if (taxCategory) {
        //         taxCategory = JSON.parse(taxCategory);
        //         if (taxCategory.length > 0) {
        //             this.tabsList[1].class = taxCategory;
        //             this.tabsList[2].class = taxCategory;
        //             this.getCAKjType();
        //             return;
        //         }
        //     }
        //     const res = await getPolicyPcCate({});
        //     if (res.code == 1) {
        //         let list = res.data;
        //         for (let i = res.data.length - 1; i >= 0; i--) {
        //             if (list[i].name.length > 6) {
        //                 list.splice(res.data.length - 1, 0, list[i]);
        //                 list.splice(i, 1);
        //             }
        //         }

        //         this.tabsList[1].class = list;
        //         this.tabsList[2].class = list;
        //         localStorage.setItem("taxCategory", JSON.stringify(list));
        //         this.getCAKjType();
        //     }
        // },

        // // 获取分类对应下标
        // getCAKjType() {
        //     let id = this.infoData.policy_cate_id.split(",");
        //     for (let j = 0; j < this.tabsList.length; j++) {
        //         if (
        //             this.tabsList[j].fieldName == "policy_cate_id" &&
        //             this.tabsList[j].value == id[0]
        //         ) {
        //             this.tabsIndex = j;
        //             this.tabsTwoIndex = 0;
        //             return;
        //         }
        //     }
        //     if (this.infoData.code != 1) {
        //         this.tabsIndex = 3;
        //         // 广东特例
        //         if (this.infoData.code == 440300) {
        //             for (
        //                 let i = 0;
        //                 i < this.tabsList[this.tabsIndex].class.length;
        //                 i++
        //             ) {
        //                 if (
        //                     this.tabsList[this.tabsIndex].class[i].id == 440300
        //                 ) {
        //                     this.tabsTwoIndex = i;
        //                     return;
        //                 }
        //             }
        //         }
        //         for (
        //             let i = 0;
        //             i < this.tabsList[this.tabsIndex].class.length;
        //             i++
        //         ) {
        //             if (
        //                 Math.floor(this.infoData.code / 10000) ==
        //                 Math.floor(
        //                     this.tabsList[this.tabsIndex].class[i].id / 10000
        //                 )
        //             ) {
        //                 this.tabsTwoIndex = i;
        //                 return;
        //             }
        //         }
        //     }
        //     if (this.infoData.code == 1) {
        //         this.tabsIndex = 1;
        //         let isHave = false;
        //         for (let i of id) {
        //             if (
        //                 i ==
        //                 this.tabsList[this.tabsIndex].class[this.tabsTwoIndex]
        //                     .id
        //             ) {
        //                 isHave = true;
        //             }
        //         }
        //         if (!isHave)
        //             for (
        //                 let i = 0;
        //                 i < this.tabsList[this.tabsIndex].class.length;
        //                 i++
        //             ) {
        //                 if (
        //                     this.tabsList[this.tabsIndex].class[i].id == id[0]
        //                 ) {
        //                     this.tabsTwoIndex = i;
        //                 }
        //             }
        //     }
        // },

        keywordRed() {
            this.seekInput = this.seekInput.replace(/\s/g, "");
            if (!this.seekInput) return;
            let regex = /^[A-Za-z]+$/;
            if (regex.test(this.seekInput)) return;
            let keywords = [this.seekInput];
            let numStr = wrapText(this.infoData.content, keywords);
            this.info_content = numStr.str;
            this.$alert(`本页面共有${numStr.num}处符合`, "查找完成", {
                confirmButtonText: "确定",
            });
        },

        // 切换字体
        changeFontSize(index = null) {
            if (index !== null) {
                this.fontSizeIndex = index;
                return;
            }
            if (this.fontSizeIndex == 2) {
                this.fontSizeIndex = 0;
            } else {
                this.fontSizeIndex += 1;
            }
        },

        // 点击menu
        // menuSelect(index) {
        //     let tabsIndex = Math.trunc(index.slice(0, 1));
        //     let tabsTwoIndex = parseInt(index.slice(1));
        //     this.$router.replace({
        //         path: "/TaxRevenue",
        //         query: {
        //             index: tabsIndex,
        //             indexTwo: tabsTwoIndex,
        //         },
        //     });
        // },

        // 回到顶部
        gotop() {
            goTopSmooth();
        },
    },
};
</script>
<style lang="scss">
.xzcs-pc-viponly-detail {
    position: relative;

    .gaussian-blur {
        -webkit-filter: blur(7px);
        filter: blur(7px);
        overflow: hidden;
        * {
            -webkit-filter: blur(7px);
            filter: blur(7px);
            overflow: hidden;
        }
    }

    .content {
        &::v-deep em {
            color: #ffffff !important;
            background: #f56c6c;
        }
    }

    .tabs-top {
        position: sticky;
        top: 80px;
        left: 0;
        height: 50px;
        background: #1c87f3;
        display: flex;
        z-index: 997;
        // width: 1200px;
        // margin: 0 auto;
        justify-content: center;

        .tab {
            line-height: 50px;
            font-size: 14px;
            color: #ffffff;
            padding: 0 24px;
            cursor: pointer;
            user-select: none;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            &:hover {
                background: #1976d4;
            }
        }

        .tabs-active {
            background: #1976d4;
        }
    }

    .regulation {
    }

    .regulation-con {
        display: flex;
        justify-content: space-between;
        width: 1200px;
        margin: 0 auto;
        margin-top: 30px;
        padding-bottom: 30px;
        flex-direction: row-reverse;

        .left {
            position: sticky;
            top: 135px;
            left: 0;
            width: 254px;

            i {
                color: #ffffff;
            }
        }

        .left_flip {
            width: 320px;
            margin-left: 18px;

            .factor-sticky {
                margin-top: 20px;
                position: sticky;
                top: 147px;
            }
            .factor,
            .new_content {
                background: linear-gradient(360deg, #ffffff 82%, #e3f1ff 100%);

                .factor_title {
                    padding: 18px 24px 28px 27px;
                    font-size: 18px;
                    font-weight: 700;
                    color: #333333;
                    line-height: 20px;
                    display: flex;
                    align-items: center;
                    img {
                        width: 22px;
                        height: 22px;
                        margin-right: 10px;
                    }
                    .factor_icon {
                        color: #1c87f3;
                        margin-right: 10px;
                    }
                }

                .line {
                    height: 1px;
                    background: #f0f0f0;
                }

                .factor_content {
                    padding: 18px 24px 28px 30px;

                    .factor_item {
                        display: flex;
                        font-size: 14px;
                        font-weight: 500;
                        color: #999999;
                        line-height: 30px;

                        .item_label {
                            white-space: nowrap;
                        }

                        .item_txt {
                            color: #333333;
                            font-weight: 600;
                        }
                    }
                }
            }

            .new_content {
                margin-top: 20px;
                background: #ffffff;
                .factor_title {
                    background: linear-gradient(
                        360deg,
                        #ffffff 32%,
                        #e3f1ff 100%
                    );
                }
                .new_content_item {
                    margin-top: 18px;

                    .content_item {
                        display: block;
                        box-sizing: border-box;
                        border-bottom: 1px solid #f3f3f3;
                        padding: 0 19px 10px 23px;
                        margin-bottom: 17px;

                        .item_label {
                            font-size: 14px;
                            font-weight: 400;
                            color: #333333;
                            line-height: 26px;
                        }

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }
                }
            }
        }

        .right {
            width: 925px;
            box-sizing: border-box;

            .search2 {
                justify-content: center !important;

                .search-item2 {
                    .input {
                        width: 245px;
                    }

                    .label {
                        width: 110px;
                        text-align: right;
                    }
                }
            }

            .search {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;

                .search-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    color: #333333;
                    margin-bottom: 22px;
                }

                .input {
                    margin-left: 10px;
                    width: 195px;
                }

                .date-picker {
                    margin-left: 10px;
                    margin-right: 260px;
                }
            }

            .search-but {
                text-align: center;
                padding-top: 10px;
            }

            .r-title {
                font-size: 16px;
                font-weight: 700;
                color: #333333;
                padding-top: 32px;
                padding-bottom: 20px;
            }
        }
    }

    .info {
        min-height: 80vh;

        .info-content {
            background: #ffffff;
            padding: 34px;
            padding-top: 0;
            // min-height: 600px;
        }

        .info-title {
            width: 696px;
            margin: 0 auto;
            font-size: 22px;
            font-weight: 500;
            color: #333333;
            text-align: center;
            line-height: 30px;
            margin-bottom: 20px;
        }

        .info-abstract {
            width: 792px;
            margin: 25px 0;
            border: 1px dashed #fafafa;
            padding: 11px 0 7px 0;
            font-size: 12px;
            font-weight: 400;
            color: #999999;
            line-height: 22px;
        }

        .up-down {
            // margin-top: 11px;

            .prev-next {
                background-color: #ffffff;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                padding: 0 45px 10px;
                font-size: 14px;
                color: #999999;

                > div {
                    display: flex;
                    justify-content: space-between;
                    padding-bottom: 10px;
                    .name {
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        max-width: 667px;
                    }
                }

                > div:hover {
                    a {
                        text-decoration: underline;
                    }
                }
                .time {
                    color: #999999;
                }
            }
        }

        .reading {
            margin-top: 13px;
        }
    }

    .info-basic {
        width: 767px;
        // height: 124px;
        padding: 24px;
        background: #f9fcff;
        // background: red;
        margin: 32px auto;
        margin-bottom: 43px;
        display: flex;
        // align-items: center;
        align-items: flex-start;
        // justify-content: flex-end;
        justify-content: space-around;
        flex-wrap: wrap;
        align-content: center;

        .info-basic-item {
            display: flex;
            // align-items: center;
            font-size: 14px;
            color: #6383a9;
            line-height: 20px;
            width: 47%;
            margin: 4px 0;

            .info-basic-label {
                width: 79px;
            }

            .info-basic-text {
                // margin-left: 10px;
                width: 100%;
                // width: 50%;
                // 单行
                // overflow: hidden;
                // white-space: nowrap;
                // text-overflow: ellipsis;
                // 多行
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 2;
                // overflow: hidden;
                // text-overflow: ellipsis;
            }

            &:nth-child(2n) {
                // margin-left: 14px;
                // margin-right: 20px;
            }
        }
    }

    .xzts {
        display: flex;
        position: relative;
        left: -24px;
        margin-bottom: 25px;
        margin-top: 39px;
        align-items: flex-start;

        .xzts-img {
            width: 120px;
            height: 120px;
            display: block;
            padding: 0;
            margin: 0;
            position: relative;
            left: 6px;
            top: 1px;
        }

        .xzts-text {
            min-height: 106px;
            width: 100%;
            background: #fff9e9;
            box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
            border-radius: 6px 6px 6px 6px;
            box-sizing: border-box;
            padding: 32px 16px;
            padding-bottom: 22px;
            box-sizing: border-box;
            font-size: 14px;
            font-family: Source Han Sans CN-Regular, Source Han Sans CN;
            color: #877848;
            line-height: 24px;
            position: relative;

            .xzts-title {
                position: absolute;
                left: 18px;
                top: -13px;
                width: 78px;
                height: 32px;
                background: #385843;
                border-radius: 5px 5px 5px 5px;
                opacity: 1;
                border: 2px solid #e4be7a;
                font-size: 16px;
                font-family: Source Han Sans CN-Regular, Source Han Sans CN;
                font-weight: 400;
                color: #ffffff;
                line-height: 32px;
                text-align: center;
            }
        }
    }

    .caozuo-list {
        display: flex;
        // padding: 0 21px;
        margin-bottom: 30px;
        justify-content: flex-end;
        align-items: center;
        height: 58px;
        background-color: #ffffff;
        border-bottom: 1px solid #f1f1f1;
        .caozuo-item {
            cursor: pointer;
            margin-left: 24px;
            display: flex;
            align-items: center;
            font-size: 12px;
            color: #666666;
            img {
                width: 20px;
                height: 20px;
                margin-right: 3px;
            }
        }

        .font-size-type {
            // border-top: 1px solid #666666;
            // border-bottom: 1px solid #666666;
            // border-left: 1px solid #666666;
            display: flex;
            align-items: center;
            margin-left: 10px;
            div {
                // border: 1px solid #666666;
                width: 24px;
                height: 24px;
                line-height: 22px;
                text-align: center;
                font-weight: 350;
                font-size: 15px;
                color: #9e9e9e;
                cursor: pointer;
                margin-left: 14px;
            }
            .size-active {
                color: #1c87f3;
            }
        }
    }

    .content {
        word-wrap: break-word;
        img {
            max-width: 80%;
            height: auto !important;
            // display: block;
            // margin: 0 auto;
            cursor: pointer;
        }

        a {
            text-decoration: underline;
            color: #2440b3;

            &:hover {
                color: #315efb;
            }

            &:visited {
                color: #771caa;
            }
        }

        p,
        span,
        a {
            font-family: ZTGB2312;
            line-height: 2;
            // white-space: pre;
        }

        td,
        th {
            padding: 5px 10px;
            border: 1px solid #ddd;
        }
    }

    .font-small {
        p,
        span,
        a {
            font-size: 14px;
        }
    }

    .font-medium {
        p,
        span,
        a {
            font-size: 18px;
        }
    }

    .font-large {
        p,
        span,
        a {
            font-size: 24px;
        }
    }

    .tabs {
        border-bottom: 1px #e9e9e9 solid;
        width: auto;
        padding-top: 0;
    }

    .tabs .tab {
        width: 50%;
        text-align: center;
        margin: 0;
    }

    .el-submenu {
        border-bottom: 2px solid #f0f0f2;
    }

    .el-submenu__title {
        background-color: #1c87f3;
        color: #ffffff;
    }

    .el-submenu__title:hover {
        background-color: rgba($color: #1c87f3, $alpha: 0.8);
    }

    .el-menu-item.is-active {
        background-color: #f2f8ff;
    }

    .el-descriptions__title {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
    }

    .el-descriptions-item__container {
        font-size: 13px;
        color: #999999;
    }

    .el-submenu__title i {
        color: #ffffff;
    }

    .el-submenu__title i::before {
        content: "\e6d9";
    }

    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow {
        transform: rotateZ(0) !important;
    }

    .el-submenu.is-opened > .el-submenu__title .el-submenu__icon-arrow::before {
        content: "\e7a9";
    }

    .zyfg .el-submenu .el-menu {
        display: flex;
        flex-wrap: wrap;
    }

    .zyfg .el-submenu .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;
        min-width: 50%;
        padding: 0 0 0 20px !important;
        text-align: left;
    }

    .dffg .el-submenu .el-menu {
        display: flex;
        flex-wrap: wrap;
    }

    .dffg .el-submenu .el-menu-item {
        min-width: 25%;
        padding: 0 !important;
        text-align: center;
    }

    .breadcrumb-seek {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 1200px;
        margin: 0 auto;

        .breadcrumb {
            width: auto;
        }

        .seek {
            padding-top: 30px;

            display: flex;
            align-items: center;

            .el-input__inner {
                height: 40px;
                width: 361px;
                border: none;
                border-radius: 0;
                position: relative;
                left: 15px;
            }

            .button {
                cursor: pointer;
                width: 91px;
                height: 39px;
                background: #1c87f3;
                color: #ffffff;
                text-align: center;
                line-height: 39px;
                font-size: 14px;
                color: #ffffff;

                i {
                    font-size: 16px;
                }
            }
        }
    }

    .wx-gzh-con {
        display: flex;
        align-items: center;
        padding: 20px 22px;
        img {
            width: 100px;
            height: 100px;
            margin-right: 16px;
        }
        .wx-gzh-con-text {
            font-size: 14px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            color: #666666;
            line-height: 20px;
        }
        .wx-gzh-con-title {
            font-size: 18px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 500;
            color: #333333;
            line-height: 20px;
            padding-bottom: 9px;
        }
    }
}
</style>
